<template>
  <div class="chart-detail">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="detail-top">
      <div class="top-left">
        医疗收入占比情况（月）
      </div>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>
    <div class="detail-box" :style="{height:height+'px'}">
      <h3 class="chart-title">
        <div class="title-circle"></div>
        <div class="title-name">{{title}}</div>
      </h3>
      <div class="detail-content"  id="myChart">

      </div>
    </div>
  </div>
</template>
<script>
  import {loadingOpt} from '../../assets/js/utils.js'
  import {getChartItemDetail1} from '../../api/api'
  import '../../assets/css/chartDetail.css'
  export default {
    name:'chartDetail',
    props:['isChange'],
    data() {
      return {
        title:`${this.$route.params.queryYear}年区域医疗费用增长趋势分析`,
        isShowChart:true,
        height:800,
        canShow:true
      }
    },
    mounted() {
      this.getContentH();
      setTimeout(()=>{
        this.myChart = this.$echarts.init(document.getElementById('myChart') ,null, {renderer: 'canvas'})
        //给echart 加loading效果
        this.myChart.showLoading(loadingOpt)
        let params = this.$route.params
        getChartItemDetail1('report/medExpGrowthTrendAnalysisDetail',params.queryYear,params.areaCode,params.costType,params.medicalCategory).then(res=>{
          let json = res.data;
          if(res.code==0){
            this.title = json.reportName;
            this.drawLine(json);
          }
        })
      },101)
    },
    watch:{
      isChange(){
        this.getContentH();
      },
    },
    methods: {
      //设置高度
      getContentH(){
        setTimeout(()=>{
          let height = document.documentElement.clientHeight;
          let barHeight = 0;
          if (document.querySelector('.el-header')) {
            this.canShow = true;
            barHeight = document.querySelector('.el-header').clientHeight;
          }else{
            this.canShow = false;
          }
          this.height = height - barHeight - 96;
        },100)
        if(this.myChart){
          setTimeout(()=>{
            this.myChart.resize();
          },301)
        }
      },
      closeAll(){
        if(!this.fullScreen){
          document.exitFullscreen?document.exitFullscreen():
            document.mozCancelFullScreen?document.mozCancelFullScreen():
              document.webkitExitFullscreen?document.webkitExitFullscreen():'';
        }
      },
      goBack(){
        this.$router.push(this.$route.query.hash.slice(1,this.$route.query.hash.length))
        /*this.closeAll();*/
      },
      drawLine(json){
        this.myChart.hideLoading();
        this.myChart.setOption({
          title : {
            subtext: '单位：万元',
            left:'4%',
            x:'left',
            subtextStyle:{
              color:'#fff'
            }
          },
          // Make gradient line here
          grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              height: '22%',
              top:50,
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              bottom:60,
              top:'37.5%',
            }
          ],
          legend: {
            top: 'top',
            left:'center',
            icon:'rect',
            itemWidth: 10,
            itemHeight:10,
            itemGap: 20,
            tooltip: {
              show: true,
              formatter:function(params){
                // console.log(paramse)
              }
            },
            data:[{
              name:'增长率',
              icon:'circle',
            },{
              name:'增长额',
            }],
            textStyle:{
              color:'#fff'
            },
            selectedMode: false
          },
          tooltip: {
            textStyle :{
              fontSize:12
            },
          },
          xAxis: [{
            data: json.yearMonthList,
            show:true,
            axisLine:{
              show:true,//显示x轴坐标线并设置为虚线
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false //不显示x轴坐标的刻度
            },
            axisLabel:{
              show:false //不显示x轴坐标数值
            }
          }, {
            data: json.yearMonthList,
            gridIndex: 1,
            axisLine:{ //x轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{ //x轴的刻度短竖线是否显示
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            splitLine: {
              show: false
            },
            position:'right',
            /*minInterval:5,*/
            splitNumber:3,
            axisLine:{
              show:false
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }, {
            gridIndex: 1,
            axisLine:{
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            splitLine: {
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          series: [{
            type: 'line',
            name: '增长率',
            showSymbol: true,
            data: json.yearlyGrowthRateList,
            symbolSize: 10,
            color:'#129cff',
            symbol:'circle',
            label:{
              show:true,
              position:'top',
              formatter:'{c}%',
              color:'#fff'
            },
            tooltip:{
              show:true,
              formatter:function(params){
                return `<span style="color:${params.color}">${params.name}</span></br><span style="color:#c7c7c7">${params.value}%</span>`
              }
            },
            markLine:{
              label:{
                position: 'start',
                formatter: '{c}%',
                color:'#fff'
              },
              symbol: 'none',//设置平均线的两端没样式
              tooltip:{
                show:true,
                formatter:function(params){
                  return `<span style="color:${params.color}">${params.name}</span></br><span style="color:#c7c7c7">${params.value}%</span>`
                }
              },
              data : [
                {
                  type : 'average',
                  name: '平均增长率',
                }
              ],
              lineStyle: {
                color:'#ff6a93'
              }
            }
          },{
            type: 'bar',
            showSymbol: false,
            name: '增长额',
            data: json.yearlyTotalCostList,
            color:'#ff6a93',
            label:{
              show:true,
              position:'top',
              formatter:function(params){
                let val = 0
                if(Math.round(params.value*100%10)==0){
                  val = params.value.toFixed(1)
                }else if(Math.round(params.value*100%100)==0){
                  val = params.value.toFixed(0)
                }else {
                  val = params.value.toFixed(2)
                }
                return val;
              },
              color:'#fff'
            },
            tooltip:{
              formatter:function(params){
                return `<span style="color:${params.color}">${params.name}</span></br><span style="color:#c7c7c7">${params.value}万元</span>`
              }
            },
            barWidth: '30%',
            xAxisIndex: 1,
            yAxisIndex: 1
          }]
        });
      },
    }
  }
</script>
<style scoped>

</style>
